<template>
  <view class="about-container">
    <!-- Logo和版本信息 -->
    <view class="logo-section">
      <image class="logo" src="/static/images/logo.png" mode="aspectFit"></image>
      <text class="app-name">商家版</text>
      <text class="version">Version 1.0.0</text>
    </view>

    <!-- 公司信息 -->
    <view class="info-section">
      <view class="info-item">
        <text class="label">公司名称</text>
        <text class="value">XXX科技有限公司</text>
      </view>
      <view class="info-item">
        <text class="label">联系电话</text>
        <text class="value" @click="makePhoneCall">400-123-4567</text>
      </view>
      <view class="info-item">
        <text class="label">电子邮箱</text>
        <text class="value">support@xxx.com</text>
      </view>
      <view class="info-item">
        <text class="label">公司地址</text>
        <text class="value">北京市朝阳区xxx大厦</text>
      </view>
    </view>

    <!-- 功能介绍 -->
    <view class="feature-section">
      <view class="section-title">功能介绍</view>
      <view class="feature-list">
        <view class="feature-item">
          <text class="feature-title">订单管理</text>
          <text class="feature-desc">实时接收订单，快速处理订单状态</text>
        </view>
        <view class="feature-item">
          <text class="feature-title">菜品管理</text>
          <text class="feature-desc">轻松管理菜品信息，随时更新菜单</text>
        </view>
        <view class="feature-item">
          <text class="feature-title">数据统计</text>
          <text class="feature-desc">查看销售数据，分析经营状况</text>
        </view>
        <view class="feature-item">
          <text class="feature-title">优惠活动</text>
          <text class="feature-desc">创建优惠活动，提升店铺销量</text>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text class="copyright">Copyright © 2024 XXX科技有限公司</text>
      <text class="icp">京ICP备xxxxxxxx号</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: '4001234567',
        success: () => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.log('拨打电话失败', err);
        }
      });
    }
  }
}
</script>

<style>
.about-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}

.app-name {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.version {
  font-size: 24rpx;
  color: #999;
}

.info-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
}

.feature-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.feature-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.feature-desc {
  font-size: 26rpx;
  color: #666;
}

.footer {
  padding: 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.copyright {
  font-size: 24rpx;
  color: #999;
}

.icp {
  font-size: 24rpx;
  color: #999;
}
</style> 